<template>
  <el-container>
    <el-header><NavBar /></el-header>
    <el-main>
      <el-row>
        <el-col :md="14"
          ><div class="register-container">
            <el-card class="box-card">
              <div class="title-container">
                <span>账号注册</span>
              </div>
              <el-form
                label-position="left"
                :model="registerForm"
                :rules="rules"
                ref="registerForm"
                label-width="100px"
                class="demo-registerForm"
              >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="registerForm.password"
                    show-password
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="check_pwd">
                  <el-input
                    v-model="registerForm.check_pwd"
                    show-password
                  ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="registerForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-input
                    class="sort-input"
                    v-model.number="registerForm.code"
                  ></el-input>
                  <el-button
                    :disabled="!isRightPhone"
                    type="primary"
                    @click="sendMsg"
                    >{{sendBtnTxt}}</el-button
                  >
                </el-form-item>
                <el-form-item label="邀请码" prop="invite_code">
                  <el-input
                    class="sort-input"
                    v-model="registerForm.invite_code"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('registerForm')"
                    >注册</el-button>
                  <el-button @click="resetForm('registerForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div></el-col
        >
        <el-col :md="10" class="hidden-sm-and-down">
          <div class="img-box">
            <el-image :src="require('@/assets/invite.png')"></el-image>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
// 导入通用组件Navbar
import { mapActions } from "vuex";
import NavBar from "@/components/NavBar";
import "element-ui/lib/theme-chalk/display.css";

export default {
  name: "Register",
  //  注册导入组件
  components: {
    NavBar,
  },
  data() {
    // 自定义用户名校验器
    var checkUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      }else {
        callback();
      }
      setTimeout(() => {
        if (value.length > 10) {
          callback(new Error("用户名不能超过10个字符"));
        }else{
          callback()
        }
      }, 2000);
        
    };
    // 密码的校验
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("check_pwd");
        }
        callback();
      }
    };
    // 确认密码的校验
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 校验手机号的验证器
    var checkPhone = (rule, value, callback) => {
      this.isRightPhone = false;
      if (value === "") {
        callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        const regPhone = /^1[3|5|7|8][0-9]{9}$/;
        // 判断是否是合法的手机号
        if (regPhone.test(value)) {
          // 如果是合法的手机号就发送api请求到后台接口判断
          this.checkPhone({ phone: value }).then((res) => {
            this.isRightPhone = true;
            callback(); // 校验成功
          });
        } else {
          callback(new Error("手机号格式不正确"));
        }
      }, 500);
    };
    return {
      // 注册表单绑定的数据
      registerForm: {
        username: '',
        password: '',
        check_pwd: '',
        phone: '',
        code: '',
        invite_code: ''
      },
      // 是否是正确的手机号码
      isRightPhone: false, // 默认不是正确的手机号
      // 发送验证码按钮的文字
      sendBtnTxt:'发送验证码',
      // 计时器（默认是空的）
      timer:null,
      // 从10开始倒数
      conter:10,
      // 表单验证规则
      rules: {
        username: [
          // 用户名校验
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { validator: checkUsername, trigger: "blur" },
        ],
        password: [
          // 第一次密码验证
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { validator: validatePass, trigger: "blur" },
        ],
        check_pwd: [
          // 第二次密码的验证
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { validator: validatePass2, trigger: "blur" },
        ],
        phone: [
          // 手机号的验证
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { validator: checkPhone, trigger: "blur" },
        ],
        code: [
          // 验证码校验（不允许有字母）
          { required: true, message: "验证码不能为空" },
          { type: 'number', message: "验证码必须为数字" }
        ],
      },
    };
  },
  methods: {
    ...mapActions({
      register: "user/register",
      checkPhone: "user/checkPhone",
      getSmsCode: "user/getSmsCode",
    }),
    // 发送验证码
    sendMsg() {
      this.isRightPhone = false
      this.getSmsCode({ phone: this.registerForm.phone }).then((res) => {
        console.log(res);
        this.$notify({
          title: "验证码",
          message: res.sms_Code,
          type: "success",
        });
        this.countDown() // 调用函数
      }).catch(err =>{
        this.isRightPhone = true
      })
    },
    // 倒计时开始
    countDown(){
      this.timer = setInterval(()=>{ // 计时器（默认是空的）
          this.sendBtnTxt = `${this.conter}秒` // 进行文字替换
          this.conter --; // 每一次减1秒
          if (this.conter < 0){ // 计时器小于0的时候就重置计时器
            this.reset()
          }
      },1000)
    },
    // 重置计时器
    reset(){
      this.isRightPhone = true // 将按钮改为可点击
      this.sendBtnTxt = '发送验证码' // 将倒计时改为文字
      if(this.timer){  // 判断有没有计时器
        clearInterval(this.timer) // 清空计时器
        this.conter = 10 // 下一次点击从第10秒开始
        this.timer = null // 继续将计时器改为空
      }
    },
    // 提交表单
    submitForm(formName) {
      console.log(formName)
      // console.log(valid)
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        console.log(formName)
        if (valid) {
          this.register(this.registerForm).then((res) => {
            this.$message({
              message: "注册成功，即将跳转到登录",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push('/login') // 注册成功的话，就跳转到登录页面实行登录
            }, 2000);
          });
        }else {
          alert('error')
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.reset()
      this.isRightPhone = false
    },
  },
};
</script>
  <style lang="scss" scoped>
.el-container .el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-row {
  height: 100%;
  .el-col {
    height: 100%;
  }
}
.el-main {
  background-color: #e9eef3;
  .img-box {
    padding: 150px 50px; // 上下给他160像素。左右给他15的像素
  }
}
.register-container {
  border-right: 1px solid rgb(175, 175, 175); // 设置边框
  height: 100%; // 设置边框高度
  width: 100%; // 设置边框宽度
  // background-color: rgb(199, 230, 248);
  padding-top: 150px; // 设置卡片离容器的顶有多高
  .box-card {
    min-height: 500px; // 最小的高度
    max-width: 450px; // 最大的宽度
    margin: 0px auto; // 外边距
  }
  .title-container {
    text-align: center; //文字居中
    font-size: 26px; // 文字的大小
    font-weight: bold; // 加粗
    margin-bottom: 15px; // 底部的
  }
  .sort-input {
    width: 80px;
    margin-right: 15px; // 间距
  }
}
</style>
